<template>
	<view class='partner'>
		<uni-nav-bar class="custom-nav-bar" :fixed="true" height='88rpx' :border='false' @clickLeft='handleBack()' background-color="tranparent"
			status-bar left-icon="left" title="合伙人" />
		<view class="header"></view>
		<view class="container">
			<view class="title">
				请选择当前的角色
			</view>
			<view class="list">
				<view
					class="list-item"
					v-for="item,index in infoList"
					:key="item.id"
					:class="{'list-item-ative':listIndex == item.id}"
					@click='handleList(item)'
				>
					<view class="value">
						<view class="value_1">
							{{item.partnerTypeName}}
						</view>
						<view class="value_2">
							{{index === 0 ? "Representative" : "Partner‌‌"}}
						</view>
						
						<!-- <image v-if="index == 0" src="@/static/mine/partner/partner-4.png" class='partner_image' mode=""></image>
						<image v-else src="@/static/mine/partner/partner-3.png" class='partner_image' mode=""></image> -->
						<image :src="item.iconUrl" class='partner_image' mode=""></image> 
					</view>
				</view>
			</view>
		</view>
		<view class="btn_partnar" @click='submit'>
			确定
		</view>
		
		<!-- 二次确认 -->
		<uni-popup ref="shutPopup" :mask-click="false">
			<view class="level-popup">
				<uni-icons type="closeempty" size="22" color="#171a26" class="closeImg" @tap="shutProp"></uni-icons>
				
				<view class="level-type">
					<image v-if="typeName == '数康代言人'" src="@/static/mine/partner/image-33.png" mode="">
					<image v-else src="@/static/mine/partner/image-44.png" mode="">
					<view class="back-tips">是否确认购买{{ typeName }}？</view>
					<view class="gary-tips">{{typeName}}将享受每日收益分红</view>
				</view>
				
				<view class="btn-box">
					<view class="btn btn1" @tap="shutProp">再想想</view>
					<view class="btn btn2" @tap="handlePay">立即购买</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 支付 -->
		<uni-popup ref="payProp" :mask-click="false">
			<view class="pay-prop">
				<image src="@/static/purchaseGoods/close.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">请输入支付密码</view>
				<view class="numTitle">为保证您的账号安全，请输入支付密码</view>
				<input placeholder="请输入您的支付密码" class="input-prop" placeholder-class="placeholder" type="number"
					v-model="payPassword" />
				<view class="sures" @tap="handleSure">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getPartnerInfoList, buyPartner } from "../../api/api.js";
	
	export default {
		name: 'partner',
		data(){
			return{
				listIndex:1,
				typeName: "",
				payPassword: "",
				infoList: []
			}
		},
		onShow() {
			this.getPartnerList();
		},
		methods:{
			submit(){
				this.$refs.shutPopup.open();
			},
			shutProp() {
				this.$refs.shutPopup.close();
			},
			handlePay() {
				this.$refs.shutPopup.close();
				this.$refs.payProp.open();
			},
			closeProp () {
				this.$refs.payProp.close();
				this.payPassword = "";
			},
			handleSure() {
				buyPartner({
					id: this.listIndex,
					payPassword: this.payPassword
				}).then(res => {
					uni.showToast({
						title: '购买成功',
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url:'/pages/mine/index'
						})
					}, 500);
				})
			},
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getPartnerList() {
				getPartnerInfoList().then(res => {
					this.infoList = res.data;
					this.listIndex = res.data[0].id;
					this.typeName = res.data[0].partnerTypeName;
				})
			},
			handleList(item) {
				this.listIndex = item.id;
				this.typeName = item.partnerTypeName;;
			}
		}
	}
</script>

<style lang="less" scoped>
	.partner {
		width: 100%;
		height: 100vh;
		background: #F6F6FAFF;
		position: relative;

		.custom-nav-bar {
			background: url('@/static/mine/partner/partner-1.png') no-repeat;
			background-size: 100% 100%;
		}

		.header {
			width: 100%;
			height: 340rpx;
			background: url("@/static/mine/partner/partner-2.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			top: 88rpx;
			left: 0;
		}

		.container {
			padding: 40rpx;
			box-sizing: border-box;

			.title {
				font-weight: 600;
				font-size: 40rpx;
				color: #151822;
				margin-bottom: 60rpx;
			}

			.list {
				display: flex;
				flex-direction: column;

				.list-item {
					width: 670rpx;
					height: 280rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					position: relative;
					display: flex;
					align-items: center;
					padding: 40rpx;
					box-sizing: border-box;
					margin-bottom: 40rpx;
					border: 2rpx solid #fff;

					.value {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.value_1 {
							font-weight: 600;
							font-size: 40rpx;
							color: #151822;
							margin-bottom: 20rpx;
						}

						.value_2 {
							font-weight: 400;
							font-size: 28rpx;
							color: #898A8F;
						}
					}

					.partner_image {
						position: absolute;
						width: 160rpx;
						height: 192rpx;
						top: 40rpx;
						right: 52rpx;
					}
				}

				.list-item-ative {
					// color: var(--tm-themeColor-text3) !important;
					border-color:var(--tm-themeColor-level1);

					.value_1 {
						// color: var(--tm-themeColor-text3) !important;
					}
				}
			}
		}

		.btn_partnar {
			width: 670rpx;
			height: 88rpx;
			background: var(--tm-themeColor-level1);
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			right: 50%;
			transform: translateX(-50%);
		}
	}
	
	.level-popup {
		width: 550rpx;
		height: 604rpx;
		padding: 60rpx 40rpx 40rpx;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-radius: 24rpx;
		background: linear-gradient( 180deg, #FFD6D6 0%, #FFD6D6 17%, #FFFFFF 54%, #FFFFFF 100%);
		box-sizing: border-box;
		
		.closeImg {
			position: absolute;
			top: 20rpx;
			right: 25rpx;
		}
		
		.level-type {
			text-align: center;
		}
		
		image {
			width: 200rpx;
			height: 200rpx;
		}
		
		.back-tips {
			margin: 24rpx 0;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #151822;
		}
		
		.gary-tips {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #898A8F;
		}
	
		.btn-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 68rpx;
	
			.btn {
				width: 224rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 16rpx;
				text-align: center;
				font-size: 32rpx;
				color: #151822;
			}
	
			.btn1 {
				background: #EEEEEE;
			}
	
			.btn2 {
				background: #EB3B27;
				margin-left: 16rpx;
				color: #ffffff;
			}
		}
	}
	
	.pay-prop {
		padding: 40rpx;
		position: relative;
		display: flex;
		// align-items: center;
		flex-direction: column;
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
	
		.closeImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 37rpx;
			right: 25rpx;
		}
	
		.title {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #151822;
		}
	
		.numTitle {
			margin: 28rpx 0;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #151822;
		}
	
		.input-prop {
			height: 88rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #F2F2F2;
		}
	
		.placeholder {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
			line-height: 33rpx;
		}
	
		.sures {
			margin-top: 40rpx;
			text-align: center;
			line-height: 86rpx;
			height: 86rpx;
			background: #EB3B27;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
</style>